.layout-order-box {
	padding-bottom: 200rpx;

	.order-msg {
		margin: 25rpx;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 15rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #333;

			.desc {
				font-size: 24rpx;
			}
		}

		.order-box {
			.msg-box {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.lab {
					font-size: 27rpx;
					color: #aaa;
				}

				.val {
					font-size: 27rpx;
					color: #333;
				}
			}
		}
	}
}
.code-box {
	position: relative;
	width: 400rpx;
	height: 400rpx;
	padding: 30rpx;
	background-color: #fff;
	.img {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 400rpx;
		height: 400rpx;
	}
}
.logistics-box {
	margin-top: 30rpx;

	.name-box {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;

		.name,
		.phone {
			margin-right: 20rpx;
			font-size: 27rpx;
		}
	}

	.address {
		font-size: 27rpx;
		color: #aaa;
	}
}

.qr-code {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9;

	.code-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.code-box {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 30rpx;
		border-radius: 15rpx;
		width: 400rpx;
		height: 400rpx;
		background-color: #fff;
	}
}

.red {
	color: #d33123 !important;
}

.pinTuan-box {
	margin-top: 30rpx;

	.pinTuan-peo {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.img-box {
			position: relative;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			.img {
				display: block;
				width: 100rpx;
				height: 100rpx;
				border: 1px solid #d33123;
				border-radius: 50%;
			}

			.avatar {
				display: block;
				width: 100rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
				color: #d1d1d1;
				border: 1px dashed #e1e1e1;
				border-radius: 50%;
			}

			.tag {
				position: absolute;
				left: -5rpx;
				top: -5rpx;
				font-size: 20rpx;
				padding: 5rpx 15rpx;
				border-radius: 10rpx;
				color: #fff;
				background-color: #3c9cff;
			}
		}
	}

	.share-box {
		padding: 20rpx 0;
		width: 320rpx;
		margin: auto;
	}
}

.code-box {
	padding: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}

.logistics-num {
	.logistics {
		margin-top: 30rpx;

		.item {
			margin-top: 15rpx;
			display: flex;
			align-items: center;

			.lab {
				font-size: 27rpx;
				color: #aaa;
			}

			.val {
				font-size: 27rpx;
				flex: 1;
			}

			.view {
				font-size: 22rpx;
				padding: 5rpx 15rpx;
				background-color: #3c9cff;
				color: #fff;
				border-radius: 10rpx;
			}

			.copy {
				font-size: 22rpx;
				padding: 5rpx 15rpx;
				background-color: #d33123;
				color: #fff;
				border-radius: 10rpx;
			}
		}
	}
}

.order-steps-box {
	margin: 25rpx;

	.steps-status {
		.status-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15rpx;

			.tit {
				font-size: 45rpx;
				color: #d33123;
			}

			.desc {
				font-size: 28rpx;
				color: #6e737d;
			}
		}

		.explain {
			padding: 20rpx;
			border-radius: 15rpx;
			margin-bottom: 5rpx;
			text-align: center;
			background: aliceblue;

			.tit {
				font-size: 26rpx;
				color: #333;
				margin-bottom: 10rpx;
			}

			.desc {
				font-size: 26rpx;
				color: #333;
			}
		}
	}

	.steps-box {
		padding: 40rpx 20rpx;
		border-radius: 15rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
	}
}

.goods-box {
	.item-box {
		margin-top: 30rpx;

		.goods-price {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				font-size: 30rpx;
				color: #d33123;
			}

			.num {
				color: #aaa;
				font-size: 27rpx;
			}
		}
	}
}

.payable {
	font-size: 40rpx !important;
	color: #d33123 !important;
}

.layout-btn-box {
	position: fixed;
	bottom: 0;
	width: calc(100% - 40rpx);
	padding-left: 20rpx;
	padding-right: 20rpx;
	border-top: solid 1px #f2f2f2;
	background-color: #ffffff; 
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	.btn-box{
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between; 
	}
	.bottom-btn-box {
		flex: 1;
		display: flex;
		align-items: center;
	}
}
